这几天因为赶时间 , 所以理解上可能有许多的误差 , 如果你不幸点进来了 , 请不要看我的代码 , 这几天我会重新修改 , 然后把错误的不足的 全部修正一下 .
/hwr/src/index.js
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; // Choose a file from the path 3 import Detail from './pages/Detail'; //Automatic search path 4 import { Router, Route, IndexRoute } from 'react-router'; 5 import createHistory from 'history/lib/createHashHistory'; 6 import List from './pages/List'; 7 8 ReactDOM.render( 9 window.scrollTo(0, 0)}>11 ,14 document.getElementById('app')15 );16 17 // 9 /* 创建历史记录 . 访问网页的记录 */18 //11 /* 如果域名下面的是 / 的话就调用 list这个文件 开始渲染页面 */19 //13 /* 如果域名下面直接是detail的话就讲detail后面的东西传给 repo 并且打开detail文件将 repo 作为参数穿进去 */ /hwr/src/pages/index.js
1 import React from 'react'; 2 import { Link } from 'react-router'; 3 4 class List extends React.Component { 5 render() { 6 return ( 7 8 Please choose a repository from the list below.
9 10 - React
11 - React Native
12 - Jest
13
14 15 );16 }17 }18 export default List;19 20 // 根据 index 文件来看 , 打开链接之后 首先进入的就是 List 渲染的页面 . 21 22 // 这一部分的内容就时分的简单了 . 自己 不会的话 , 赶紧 请教一下别人 . /hwr/src/pages/index.js
import React from 'react';import ajax from 'superagent';class Detail extends React.Component { constructor(props) { super(props); this.state = { name: [], mode: 'test1', test1: [], test2: [], test3: [] }; } fetchFeed(type) { const baseURL = 'http://192.168.1.100:3000'; ajax.get(`${baseURL}/${this.props.params.repo}/${type}`) //ajax.get(`http://192.168.1.100:3000/${type}`) .end((error, response) => { console.dir(response.body[0].url) if (!error && response) { this.setState({ [type]: response.body }); } else { console.log(`Error fetching ${type}`, error); } } ); } componentWillMount() { var self = this; self.fetchFeed('test1'); self.fetchFeed('test2'); self.fetchFeed('test3'); } showcommits() { this.setState({ mode: 'test1' }); } showforks() { this.setState({ mode: 'test2' }); } showpulls() { this.setState({ mode: 'test3' }); } findName(){ } rendercommits() { return this.state.test1.map((commit, index) => { const author = commit.author||commit.owner ? commit.author : 'Anonymous'; return ( {author}: {commit.url}.
); }); } renderforks() { return this.state.test2.map((fork, index) => { const owner = fork.author ? fork.author : 'Anonymous'; return ( {owner}: {fork.url}
); }); } renderpulls() { return this.state.test3.map((pull, index) => { const user = pull.author ? pull.author : 'Anonymous'; return ( {user}: {pull.url}.
); }); } render() { let content; if (this.state.mode === 'test1') { content = this.rendercommits(); } else if (this.state.mode === 'test2') { content = this.renderforks(); } else { content = this.renderpulls(); } return ( {content} ); }}export default Detail;// 3 在 index 文件中的 repo 作为 属性传到了这里的构造函数 props// 16 this.props.params.repo 调用this下的 , props 属性 , 下的 repo ( 具体是什么我百度了一下 , 但是看的不懂 , 明天问一下老师 . )// 自己分析 15 16 行 很简单 , 17行的error指的是 ajax.get 下载网页是否成功的状态( 我估计应该是储存的网页状态码 例如 200(正常) , 404( 服务器无法提供信息 ) 503 ( 服务器拒绝提供服务 , 爬虫常见 ) ) , response 用于储存 , 下载成功之后 的内容